import React, { Component } from 'react'
import { HomeWrapper, HomeLeft, HomeRight } from './style'

import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Writer from './components/Writer'
import BackTop from './components/BackTop'
import { connect } from 'react-redux'
import { actionCreators } from './store'

class Home extends Component {
  componentDidMount() {
    this.props.getHomeData()
    this.bindEvents()
  }
  bindEvents() {
    window.addEventListener('scroll', e => {
      if (document.documentElement.scrollTop > 400) {
        this.props.toggleBackTopShow(true)
      } else {
        this.props.toggleBackTopShow(false)
      }
    })
  }
  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img
            className="banner-img"
            alt="banner"
            src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/149303/6/9577/101662/5f72df07Ea3cbdb35/cb99699befac60c8.jpg.webp"
          />
          <Topic />
          <List />
        </HomeLeft>
        <HomeRight>
          <Recommend />
          <Writer />
        </HomeRight>
        {this.props.showBackTop ? <BackTop /> : ''}

      </HomeWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    showBackTop: state.getIn(['home', 'showBackTop'])
  }
}

const { getHomeData, toggleBackTopShow } = actionCreators
const mapDispatchToProps = { getHomeData, toggleBackTopShow }
export default connect(mapStateToProps, mapDispatchToProps)(Home)
